<template>
    <el-row :gutter="0" justify="space-around">
        <el-col :span="8">
            <el-card style="width: 100%"  shadow="always" body-class="exhibit">
                <template #header>公司简介 </template>
                <el-avatar :size="200" :src="'http://localhost:8080/file/downLoad?fileName=' + company.logo" />
                <span style="margin: 5% 0;font-size: 20px; font-family: '宋体';font-weight: bold;">{{ company.name }}</span>
                <el-descriptions :column="1" size="large">
                    <el-descriptions-item label="电话" label-class-name="lable" class-name="name">{{
                        company.tel
                        }}</el-descriptions-item>
                    <el-descriptions-item label="邮箱" label-class-name="lable" class-name="name">{{
                        company.email
                        }}</el-descriptions-item>
                </el-descriptions>

                <div v-html="company.intro" style="margin-top: 5%;"></div>

                <template #footer > 
                    <div style="display: flex;justify-content: space-around; align-items: center;">
                    <span style="font-size: 20px;    color: rgb(53, 135, 217);">地址:&nbsp;{{ company.address }}
                    </span> 
                    <div style="display: flex;justify-content: space-around;flex-direction: column; align-items: center;">
                       
                    <el-avatar :size="100" shape="square"
                        :src="'http://localhost:8080/file/downLoad?fileName=' + company.qrCode" />
                    
                    </div>
                    </div></template>
            </el-card>
        </el-col>
        <el-col :span="15">
            <el-card style="width: 95%" shadow="always">
                <template #header >
                    <div style="display: flex;justify-content: space-around;align-items: center;">
                    <span style=" font-weight: bold;">修改数据</span>
                    <el-button type="primary" @click="save">保存</el-button>
                </div>
                </template>

                <el-row :gutter="0" align="middle" justify="space-around">
                    <el-col :span="10"><span>公司名称</span> <el-input v-model="company.name"></el-input></el-col>
                    <el-col :span="10"><span>logo</span>
                        <el-upload v-model:file-list="fileList" action="http://localhost:8080/file/upload"
                            :onRemove="remove" :onSuccess="success" list-type="picture-card" :show-file-list="true">
                            <el-icon>
                                <Plus />
                            </el-icon> </el-upload></el-col>
                </el-row>
                <el-row :gutter="0" align="middle" justify="space-around">
                    <el-col :span="10"><span>邮箱</span>
                        <el-input placeholder="输入邮箱" v-model="company.email"></el-input></el-col>
                    <el-col :span="10"><span>电话</span>
                        <el-input placeholder="输入电话" v-model="company.tel"></el-input></el-col>
                </el-row>
                <el-row :gutter="0" height="200">
                    <el-col :span="24">
                        <span>公司简介</span>
                        <TEditor v-model="company.intro" :modelValue="modelValue" :min-height="300" :maxHeight="300"></TEditor>
                    </el-col>
                </el-row>
                <el-row :gutter="0" align="middle" justify="space-around">
                    <el-col :span="10"><span>地址</span><el-input placeholder="输入地址"
                            v-model="company.address"></el-input></el-col>
                    <el-col :span="10">
                        <span>公司二维码</span>
                        <el-upload v-model:file-list="eqfileList" action="http://localhost:8080/file/upload"
                            :onRemove="eqremove" :onSuccess="eqsuccess" list-type="picture-card">
                            <el-icon>
                                <Plus />
                            </el-icon>
                        </el-upload>
                    </el-col>
                </el-row>
            </el-card>
        </el-col>
    </el-row>
</template>
<script setup>
import TEditor from "@/components/TEditor.vue";
import axios from "axios";
import { ref } from "vue";
// 初始化数据
let fileList = ref([]);
let eqfileList = ref([]);
let company = ref({
    name: '',
    logo: '',
    address: '',
    tel: '',
    email: '',
    intro: '',
    qrCode: '',
});

axios.post('/Company/selectAll', company.value).then(res => {
    if (res.data.code==2) {
        alert(res.data.msg)
    } else {
        console.log('res.data.data', res.data.data);
        company.value = res.data.data;
        console.log('company', company.value.address);
        eqfileList.value = [
            {
                url: 'http://localhost:8080/file/downLoad?fileName=' + company.value.qrCode,
                name: 'upload.name',

            }]
        fileList.value = [
            {
                url: 'http://localhost:8080/file/downLoad?fileName=' + company.value.logo,
                name: 'upload.name',
            }
        ]
    }

}).catch(err => {
    console.log('err', err);
    alert(err)
})
function eqsuccess(response, upload) {
    eqfileList.value = [
        {
            url: 'http://localhost:8080/file/downLoad?fileName=' + response.data,
            name: upload.name,

        }
    ];
    company.value.qrCode = response.data;
}
function success(response, uploadFile) {
    fileList.value = [
        {
            url: 'http://localhost:8080/file/downLoad?fileName=' + response.data,
            name: uploadFile.name,

        }
    ];
    company.value.logo = response.data;
    console.log('fileList', fileList.value);
    console.log('label', response.data);
}
function eqremove() {
    eqfileList.value = [];
}
function remove() {
    fileList.value = [];
}
function save() {
    let aa = JSON.stringify(company.value);
    axios.post('/Company/update', { company: aa }).then(res => {
        if (res.data.code==2) {
            alert(res.data.msg)
        } else {
            alert('修改成功')
            company.value = res.data.data;
        }
    }).catch(err => {
        console.log('err', err);
        alert(err)
    })
}
function modelValue(val) {
    company.value.intro = val;
}
</script>
<style scoped>
:deep(.exhibit) {
    display: flex;
height:550px;
    flex-direction: column;
    align-items: center;
}

:deep(.lable) {
    font-weight: bold;
    font-family: '宋体';
    font-size: 20px;
    color: rgb(53, 135, 217);


}

:deep(.name) {
    font-size: 20px;
    font-family: '宋体';
    color: rgb(53, 135, 217);
}
</style>
